<!DOCTYPE html>
<html>

<head>
  <title>30 点</title>
  <link rel="stylesheet" charset="utf-8" type='text/css' href="style.css">
</head>

<body>
  <div class="loginScreen" style="display: none;">
    <input maxlength="6" type="text" name="loginName" id="loginName" placeholder="输入玩家名称">
    <button id="loginBtn">登入</button>
  </div>
  <div class="roomScreen" style="display: none;">
    <nav>
      <span id="playerName">玩家名称</span>
      <span>在线人数<span id="onlineNums">1</span></span>
      <button class="quickStartBtn">快速匹配</button>
    </nav>
    <ul>
      <li data-roomIndex="0">
        <div data-deskIndex="0"></div>
        <div data-deskIndex="1"></div>
        <div data-deskIndex="2"></div>
      </li>
      <li data-roomIndex="1">
        <div data-deskIndex="0"></div>
        <div data-deskIndex="1"></div>
        <div data-deskIndex="2"></div>
      </li>
      <li data-roomIndex="2">
        <div data-deskIndex="0"></div>
        <div data-deskIndex="1"></div>
        <div data-deskIndex="2"></div>
      </li>
      <li data-roomIndex="3">
        <div data-deskIndex="0"></div>
        <div data-deskIndex="1"></div>
        <div data-deskIndex="2"></div>
      </li>
      <li data-roomIndex="4">
        <div data-deskIndex="0"></div>
        <div data-deskIndex="1"></div>
        <div data-deskIndex="2"></div>
      </li>
      <li data-roomIndex="5">
        <div data-deskIndex="0"></div>
        <div data-deskIndex="1"></div>
        <div data-deskIndex="2"></div>
      </li>
    </ul>
  </div>
  <main style="display: block;">
    <div class="desk">
      <div class="row">
        <div class="left">
          <div class="hand"></div>
          <div class="player_box">
            <div class="box_left">玩家名称</div>
            <div class="box_right">
              <table border="1">
                <tr>
                  <th class="icon_bg heitao"></th>
                  <th class="icon_bg hongtao"></th>
                  <th class="icon_bg meihua"></th>
                </tr>
                <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="card_area">
          <div class="rest_card">抽牌堆</div>
          <div class="dead_card">弃牌堆</div>
        </div>
        <div class="right">
          <div class="hand"></div>
          <div class="player_box">
            <div class="box_left">玩家名称</div>
            <div class="box_right">
              <table border="1">
                <tr>
                  <th class="icon_bg heitao"></th>
                  <th class="icon_bg hongtao"></th>
                  <th class="icon_bg meihua"></th>
                </tr>
                <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="player_box">
          <div class="box_left">玩家名称</div>
          <div class="box_right">
            <table border="1">
              <tr>
                <th class="icon_bg heitao"></th>
                <th class="icon_bg hongtao"></th>
                <th class="icon_bg meihua"></th>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </table>
          </div>
        </div>
        <div class="hand"></div>
        <div class="playCardRecorder">出牌记录区</div>
      </div>
    </div>
  </main>
  <audio src="audio/shua.mp3" class="shua"></audio>
  <!-- 由服务器推送的客户端 socket.io -->
  <script src="/socket.io/socket.io.js"></script>
  <script src="login.js"></script>
  <script src="render.js"></script>
  <script src="game.js"></script>
</body>

</html>